<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周杰伦 - 声破天音乐</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/artist.css">
    <link rel="stylesheet" href="assets/css/player-bar.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="liked-songs.css">
</head>

<body>
    <div class="main-container">
        <!-- 侧边导航栏 -->
        <aside class="sidebar">
            <div class="logo">
                <svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="25" cy="25" r="20" fill="#1DB954" />
                    <path d="M18 27.5C18 27.5 22 23.5 25 23.5C28 23.5 32 27.5 32 27.5" stroke="black" stroke-width="2"
                        fill="none" />
                    <path d="M16 21.5C16 21.5 22 15.5 25 15.5C28 15.5 34 21.5 34 21.5" stroke="black" stroke-width="2"
                        fill="none" />
                    <path d="M14 15.5C14 15.5 21 7.5 25 7.5C29 7.5 36 15.5 36 15.5" stroke="black" stroke-width="2"
                        fill="none" />
                    <text x="50" y="32" font-family="Arial, sans-serif" font-size="24" font-weight="bold"
                        fill="white">声破天</text>
                </svg>
            </div>
            <nav class="main-nav">
                <ul>
                    <li class="nav-item">
                        <a href="index.html"><i class="fas fa-home"></i> <span>首页</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="search.html"><i class="fas fa-search"></i> <span>搜索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="explore.html"><i class="fas fa-compass"></i> <span>探索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="library.html"><i class="fas fa-book"></i> <span>音乐库</span></a>
                    </li>
                </ul>
            </nav>

            <div class="library-nav">
                <div class="library-header">
                    <h2><i class="fas fa-plus-square"></i> 创建播放列表</h2>
                </div>
                <div class="library-items">
                    <div class="library-item">
                        <div class="liked-songs">
                            <div class="liked-gradient">
                                <i class="fas fa-heart"></i>
                            </div>
                            <h3 data-i18n="liked_songs">我喜欢的歌曲</h3>
                            <p><span data-i18n="playlist">播放列表</span> • 32 <span data-i18n="songs">首歌曲</span></p>
                        </div>
                    </div>
                    <div class="library-item">
                        <div class="playlist-item">
                            <h3>我的播放列表 #1</h3>
                            <p>播放列表 • 用户</p>
                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="content">
            <header class="top-bar">
                <div class="navigation-buttons">
                    <button class="nav-btn"><i class="fas fa-chevron-left"></i></button>
                    <button class="nav-btn"><i class="fas fa-chevron-right"></i></button>
                </div>
                <div class="user-menu">
                    <div class="auth-buttons">
                        <a href="login.html" class="login-btn"><i class="fas fa-sign-in-alt"></i> <span>登录</span></a>
                        <a href="register.html" class="register-btn"><i class="fas fa-user-plus"></i>
                            <span>注册</span></a>
                    </div>
                </div>
            </header>

            <!-- 艺术家页面内容 -->
            <div class="artist-header">
                <div class="artist-header-overlay"></div>
                <div class="artist-image">
                    <img src="assets/images/artists/artist1_large.jpg" alt="周杰伦">
                </div>
                <div class="artist-info">
                    <div class="artist-tag">艺术家</div>
                    <h1 class="artist-name">周杰伦</h1>
                    <div class="artist-stats">
                        <div class="monthly-listeners">
                            <span>每月收听人数:</span>
                            <span class="stats-number">1,200万+</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="content-container artist-container">
                <div class="artist-actions">
                    <button class="play-btn large-play-btn">
                        <i class="fas fa-play"></i>
                    </button>
                    <button class="follow-btn">
                        <i class="fas fa-user-plus"></i> 关注
                    </button>
                    <div class="more-actions">
                        <button class="more-btn">
                            <i class="fas fa-ellipsis-h"></i>
                        </button>
                    </div>
                </div>

                <!-- 热门歌曲部分 -->
                <section class="popular-tracks-section">
                    <div class="section-header">
                        <h2>热门歌曲</h2>
                        <a href="#" class="view-all">查看全部</a>
                    </div>

                    <div class="popular-tracks">
                        <table class="track-list">
                            <thead>
                                <tr>
                                    <th style="width: 40px">#</th>
                                    <th>歌曲</th>
                                    <th style="text-align: right;">播放次数</th>
                                    <th style="width: 80px; text-align: right;">时长</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="track-item">
                                    <td class="track-number">1</td>
                                    <td class="track-info">
                                        <div class="track-img">
                                            <img src="assets/images/covers/cover2.jpg" alt="叶惠美">
                                        </div>
                                        <div class="track-name-artist">
                                            <div class="track-name">晴天</div>
                                            <div class="track-album">叶惠美</div>
                                        </div>
                                    </td>
                                    <td class="track-plays">21,548,963</td>
                                    <td class="track-duration">4:29</td>
                                </tr>
                                <tr class="track-item">
                                    <td class="track-number">2</td>
                                    <td class="track-info">
                                        <div class="track-img">
                                            <img src="assets/images/covers/cover1.jpg" alt="魔杰座">
                                        </div>
                                        <div class="track-name-artist">
                                            <div class="track-name">稻香</div>
                                            <div class="track-album">魔杰座</div>
                                        </div>
                                    </td>
                                    <td class="track-plays">18,635,412</td>
                                    <td class="track-duration">3:42</td>
                                </tr>
                                <tr class="track-item">
                                    <td class="track-number">3</td>
                                    <td class="track-info">
                                        <div class="track-img">
                                            <img src="assets/images/covers/cover4.jpg" alt="七里香">
                                        </div>
                                        <div class="track-name-artist">
                                            <div class="track-name">七里香</div>
                                            <div class="track-album">七里香</div>
                                        </div>
                                    </td>
                                    <td class="track-plays">15,987,236</td>
                                    <td class="track-duration">4:15</td>
                                </tr>
                                <tr class="track-item">
                                    <td class="track-number">4</td>
                                    <td class="track-info">
                                        <div class="track-img">
                                            <img src="assets/images/covers/cover3.jpg" alt="范特西">
                                        </div>
                                        <div class="track-name-artist">
                                            <div class="track-name">简单爱</div>
                                            <div class="track-album">范特西</div>
                                        </div>
                                    </td>
                                    <td class="track-plays">14,562,874</td>
                                    <td class="track-duration">4:31</td>
                                </tr>
                                <tr class="track-item">
                                    <td class="track-number">5</td>
                                    <td class="track-info">
                                        <div class="track-img">
                                            <img src="assets/images/covers/cover5.jpg" alt="十一月的肖邦">
                                        </div>
                                        <div class="track-name-artist">
                                            <div class="track-name">夜曲</div>
                                            <div class="track-album">十一月的肖邦</div>
                                        </div>
                                    </td>
                                    <td class="track-plays">13,984,325</td>
                                    <td class="track-duration">3:48</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </section>

                <!-- 专辑部分 -->
                <section class="albums-section">
                    <div class="section-header">
                        <h2>专辑</h2>
                        <a href="#" class="view-all">查看全部</a>
                    </div>

                    <div class="card-grid albums-grid">
                        <div class="album-card">
                            <div class="album-img">
                                <img src="assets/images/covers/cover1.jpg" alt="魔杰座">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>魔杰座</h3>
                            <p>2008 • 专辑</p>
                        </div>

                        <div class="album-card">
                            <div class="album-img">
                                <img src="assets/images/covers/cover2.jpg" alt="叶惠美">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>叶惠美</h3>
                            <p>2003 • 专辑</p>
                        </div>

                        <div class="album-card">
                            <div class="album-img">
                                <img src="assets/images/covers/cover4.jpg" alt="七里香">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>七里香</h3>
                            <p>2004 • 专辑</p>
                        </div>

                        <div class="album-card">
                            <div class="album-img">
                                <img src="assets/images/covers/cover3.jpg" alt="范特西">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>范特西</h3>
                            <p>2001 • 专辑</p>
                        </div>

                        <div class="album-card">
                            <div class="album-img">
                                <img src="assets/images/covers/cover5.jpg" alt="十一月的肖邦">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>十一月的肖邦</h3>
                            <p>2005 • 专辑</p>
                        </div>

                        <div class="album-card">
                            <div class="album-img">
                                <img src="assets/images/covers/cover6.jpg" alt="Jay">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>Jay</h3>
                            <p>2000 • 专辑</p>
                        </div>
                    </div>
                </section>

                <!-- 艺术家简介部分 -->
                <section class="artist-about-section">
                    <div class="section-header">
                        <h2>关于</h2>
                    </div>

                    <div class="artist-bio">
                        <div class="bio-image">
                            <img src="assets/images/artists/artist1_bio.jpg" alt="周杰伦简介">
                        </div>
                        <div class="bio-content">
                            <p>周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，华语流行男歌手、音乐人、演员、导演、编剧、监制、商人。</p>
                            <p>2000年发行首张个人专辑《Jay》。2001年发行专辑《范特西》。2002年举行"The
                                One"世界巡回演唱会。2003年登上美国《时代周刊》亚洲版封面人物。2004年获得世界音乐大奖中国区最畅销艺人奖。</p>
                            <p>2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖。2007年自导自演《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖。
                            </p>
                            <p>2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖。2009年入选美国CNN评出的"25位亚洲最具影响力的人物"。</p>
                            <div class="bio-stats">
                                <div class="stat-item">
                                    <span class="stat-number">1.2亿+</span>
                                    <span class="stat-label">粉丝</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-number">15</span>
                                    <span class="stat-label">专辑</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-number">200+</span>
                                    <span class="stat-label">单曲</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 相似艺术家部分 -->
                <section class="similar-artists-section">
                    <div class="section-header">
                        <h2>粉丝还喜欢</h2>
                        <a href="#" class="view-all">查看全部</a>
                    </div>

                    <div class="card-grid">
                        <div class="card artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/artist2.jpg" alt="林俊杰">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            <h3>林俊杰</h3>
                            <p>艺术家</p>
                        </div>

                        <div class="card artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/artist3.jpg" alt="陈奕迅">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            <h3>陈奕迅</h3>
                            <p>艺术家</p>
                        </div>

                        <div class="card artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/artist5.jpg" alt="张学友">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            <h3>张学友</h3>
                            <p>艺术家</p>
                        </div>

                        <div class="card artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/artist6.jpg" alt="王力宏">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            <h3>王力宏</h3>
                            <p>艺术家</p>
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>

    <!-- 播放器栏 -->
    <footer class="player-bar">
        <div class="now-playing">
            <div class="track-info">
                <div class="track-image">
                    <img src="assets/images/covers/cover1.jpg" alt="当前播放歌曲">
                </div>
                <div class="track-details">
                    <h4 class="track-name" data-i18n="no_song_playing">当前没有播放歌曲</h4>
                    <p class="artist-name" data-i18n="choose_song">选择一首歌曲开始播放</p>
                </div>
            </div>
            <div class="track-actions">
                <button class="action-btn"><i class="far fa-heart"></i></button>
                <button class="action-btn"><i class="fas fa-external-link-alt"></i></button>
            </div>
        </div>

        <div class="player-controls">
            <div class="control-buttons">
                <button class="control-btn"><i class="fas fa-random"></i></button>
                <button class="control-btn"><i class="fas fa-step-backward"></i></button>
                <button class="control-btn play-btn"><i class="fas fa-play"></i></button>
                <button class="control-btn"><i class="fas fa-step-forward"></i></button>
                <button class="control-btn"><i class="fas fa-redo"></i></button>
            </div>
            <div class="playback-bar">
                <span class="current-time">0:00</span>
                <div class="progress-bar">
                    <div class="progress"></div>
                    <div class="progress-handle"></div>
                </div>
                <span class="total-time">0:00</span>
            </div>
        </div>

        <div class="player-options">
            <button class="option-btn"><i class="fas fa-list"></i></button>
            <button class="option-btn"><i class="fas fa-desktop"></i></button>
            <div class="volume-control">
                <button class="option-btn"><i class="fas fa-volume-up"></i></button>
                <div class="volume-bar">
                    <div class="volume-level"></div>
                    <div class="volume-handle"></div>
                </div>
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 播放按钮悬停效果
            const cards = document.querySelectorAll('.card');

            cards.forEach(card => {
                card.addEventListener('mouseenter', () => {
                    const playButton = card.querySelector('.play-button');
                    if (playButton) {
                        playButton.style.opacity = '1';
                        playButton.style.transform = 'translateY(0)';
                    }
                });

                card.addEventListener('mouseleave', () => {
                    const playButton = card.querySelector('.play-button');
                    if (playButton) {
                        playButton.style.opacity = '0';
                        playButton.style.transform = 'translateY(10px)';
                    }
                });
            });

            // 关注按钮功能
            const followBtn = document.querySelector('.follow-btn');

            if (followBtn) {
                followBtn.addEventListener('click', function () {
                    if (this.classList.contains('following')) {
                        this.classList.remove('following');
                        this.innerHTML = '<i class="fas fa-user-plus"></i> 关注';
                    } else {
                        this.classList.add('following');
                        this.innerHTML = '<i class="fas fa-check"></i> 已关注';
                    }
                });
            }

            // 歌曲列表交互
            const trackItems = document.querySelectorAll('.track-item');

            trackItems.forEach((item, index) => {
                const trackNumber = item.querySelector('.track-number');
                const originalNumber = trackNumber.textContent;

                item.addEventListener('mouseenter', () => {
                    trackNumber.innerHTML = '<i class="fas fa-play"></i>';
                });

                item.addEventListener('mouseleave', () => {
                    trackNumber.textContent = originalNumber;
                });

                item.addEventListener('click', () => {
                    trackItems.forEach(t => t.classList.remove('active'));
                    item.classList.add('active');
                });
            });
        });
    </script>
    <script src="assets/js/i18n.js"></script>
    <script src="assets/js/player.js"></script>
    <script src="assets/js/navigation.js"></script>
</body>

</html>